<template>
  <div class="home">
    <el-container>
<!--      头部导航-->
      <div class="site-navbar">
        <div class="site-navbar__header">
          <h1 class="site-navbar__brand" >
            <a href="" class="a">SMA基因检测系统</a>
            <a href="" class="aa">SMA</a>
          </h1>
        </div>
        <div class="site-navbar__body clearfix" :class="isCollapse?'class-a':'class-b'">
          <div  class="btn-left" >
            <el-button @click="isCollapse = !isCollapse" class="toggle-button"
                       :icon="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'">
            </el-button>
          </div >
          <div class="exit">
<!--            用户头象-->
            <div class="touxiang">
              <el-avatar  style="margin-top: 5px" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
            <ul>
<!--              小齿轮-->
              <li><i class="el-icon-setting"></i></li>
              <li>
                <el-dropdown :hide-on-click="false">
<!--                  用户名-->
                 <span class="el-dropdown-link">
                    {{ userName }}
                </span>
<!--                  弹窗-->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>修改密码</el-dropdown-item>

                  <el-dropdown-item @click="clearToken"><el-button @click="clearToken" class="btn">退出</el-button></el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--        侧边栏-->
      <el-aside :width="isCollapse?'60px':'231px'">
        <div class="aside_hander" >
          <el-menu
            background-color="#2b373d"
            text-color="#c5cbcf"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            unique-opened
            router
            :default-active="activeIndes"
          >
            <el-menu-item-group>
              <el-menu-item index="home"><i class="icon1">桌面管理</i></el-menu-item>
            </el-menu-item-group>
            <!--          一级菜单-->
            <el-submenu :index="item.menuId + ''" v-for="item in menuList" :key="item.menuId">
              <template slot="title">
                <i :class="iconObj[item.menuId]"></i>
                <span @click="goRouter(item.url)">{{ item.name }}</span>
              </template>
              <!--            二级菜单-->
              <el-menu-item-group v-if="item.list">
                <el-menu-item :index="'/'+subitem.url" v-for="subitem in item.list" :key="subitem.menuId"
                              @click="goToNav(subitem.url)">{{ subitem.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-main :class="isCollapse?'class-c':'class-d'">
<!--          动态删减导航-->
          <el-tabs
            :class="isCollapse?'class-c':'class-d'"
            v-model="editableTabsValue"
            type="card"
            editable
            @edit="handleTabsEdit"
          >
            <el-tab-pane
              :class="isCollapse?'class-c':'class-d'"
              :key="item.menuId"
              v-for="(item, index) in editableTabs"
              :label="item.name"
              :name="item.name"
            >
              {{item.content}}
            </el-tab-pane>
          </el-tabs>
<!--          卡片-->
          <el-card class="box-card">
<!--            路由视图-->
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import { GetHomeNav } from '../api/home/index'

export default {
  name: 'Home1',
  data () {
    return {
      // 用户名
      userName: null,
      // 被激活的连接地址
      activeIndes: '',
      // 侧边栏导航的数据
      menuList: [],
      // 折叠
      isCollapse: false,
      // 图标数组
      iconObj: {
        31: 'el-icon-s-home',
        32: 'el-icon-edit-outline',
        33: 'el-icon-s-operation',
        34: 'el-icon-view',
        35: 'el-icon-document',
        36: 'el-icon-notebook-2',
        37: 'el-icon-discover',
        38: 'el-icon-s-data',
        39: 'el-icon-edit-outline',
        40: 'el-icon-bell',
        41: ''

      },
      // 动态删减导航
      activeList: null,
      editableTabsValue: '5',
      editableTabs: [],
      tabIndex: 2
    }
  },
  mounted () {
    this.getHomeNav()
    this.getName()
  },

  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    // 路由跳转
    goToNav (v) {
      console.log(v)
      this.activeIndes = `/${v}`
    },
    goRouter (v) {
      console.log(v)
      if (v.leng !== 0) {
        this.$router.push(`/${v}`)
      } else {

      }
      // this.activeIndes = `/${v}`
    },
    // 获取用户名
    getName () {
      this.userName = window.sessionStorage.getItem('username')
    },
    // 退出清空token
    clearToken () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 动态删减方法
    handleTabsEdit (targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    },

    // 哈哈哈哈ヾ(≧▽≦*)oヾ(≧▽≦*)oヾ(≧▽≦*)oヾ(≧▽≦*)oヾ(≧▽≦*)oヾ(≧▽≦*)o
    async getHomeNav () {
      let d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now() // use high-precision timer if available
      }
      const t = {
        t: d
      }
      const { data: res } = await GetHomeNav(t)
      console.log(res)
      this.menuList = res.menuList
      this.editableTabs = res.menuList
      console.log(this.activeList)
      // this.editableTabsValue = res.menuList
    }
  }
}
</script>
<style  lang="less" >
.class-e{
  left: 0;
  left: 0;
}
.el-button:focus, .el-button:hover {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ffffff;
}
.class-a{
  margin-left: 60px;
  transition: all 0.3s;
}

.class-b{
  margin-left: 230px;
  transition: all 0.3s;
}
.touxiang{
  position: absolute;
  top: 0;
  right: 95px;
}
.exit{
  float: right;
  //width: 300px;
}
.exit li {
  display: inline-block;
  padding: 22px 36px;
}
.btn-left{
  float: left;
}
.clearfix:after, .clearfix:before {
  content: " ";
  display: table;
}
.site-navbar__header {
  position: relative;
  float: left;
  //width: 230px;
  height: 50px;
  overflow: hidden;
}
.site-navbar__body {
  position: relative;
  //margin-left: 230px;
  padding-right: 15px;
  background-color: #fff !important;
  z-index: 9;
  height: 60px;
}
.a,.aa{
  margin: 0 5px;
  color: #fff;
}
.aa{
  display: none;
}
.site-navbar__brand {
  display: table-cell;
  vertical-align: middle;
  width: 230px;
  height: 50px;
  margin: 0;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
li{
  list-style: none;
}
.site-navbar__brand{
  display: table-cell;
  vertical-align: middle;
  width: 230px;
  height: 50px;
  margin: 0;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.site-navbar{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  height: 60px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
  background-color: #17b3a3;
}

.el-icon-arrow-down:before {
  display: none;
}
.el-header {
  z-index: 999;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  height: 40px;
  line-height: 60px;
  position: fixed;
  width: 850px;
  top: 0;
  right: 0;
}

.el-aside {
  position: fixed;
  top: 0px;
  left: 0;
  bottom: 0;
  z-index: 1020;
  margin-top: 60px;
  overflow: hidden;
  background-color: #ffffff;
  color: #333;
  //text-align: center;
  line-height: 200px;
  height: 100%;
  transition: all 0.3s;
  //height: calc(100vh - 61px);
  //overflow-y: hidden;
}
.class-c{
  margin-left: 60px;
  transition: all 0.3s;
}
.class-d{
  margin-left: 230px;
  transition: all 0.3s;
}
.el-main {
  //padding: 0px 16px !important;
  //height: calc(100vh - 61px); //61px为顶部header盒子高度
  overflow-y: auto;
  //background-color: #E9EEF3;
  color: #333;
  position: relative;
  //padding: 15px;
  padding-top: 70px;

  min-height: 100%;
  background: #f1f4f5;
}

.left {
  background-color: #17b3a3;
  //width: 200px;
  height: 60px;
  //position: fixed;
  //margin-left: -20px;
}

.left h2 {
  color: #ffffff;
  z-index: 9999;
  position: absolute;
  top: -70px;
  left: 0;
}

.username {
  position: absolute;
  right: -145px;
  top: 0;
}

//.el-icon-setting {
//  position: absolute;
//  top: 25px;
//  left: 283px;
//}

.toggle-button {
  width: 99%;
  font-size: 30px;
  border: 0;
  color: #4a4b4d;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin-top: 50px;
  //width: 80%;
}
.btn{
  border: 0;
}
.el-menu-item i {
  color: #c5cbcf;
}
.el-tabs__header {
  position: fixed;
  top: 50px;
  left: 230px;
  right: 0;
  z-index: 930;
  padding: 10px 55px 0 15px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  background-color: #fff;
}
.el-tabs__item.is-active {
  color: #17b3a3;
  border-bottom: 2px solid #17b3a3!important;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  position: relative;
  border:0 !important;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: 0 !important;

}
.aside_hander{
  position: relative;
  z-index: 1;
  width: 250px;
  height: 100%;
  padding-bottom: 15px;
  overflow-y: scroll;
}
.site-sidebar__menu.el-menu {
  width: 230px;
  border-right: 0;
}
.site-sidebar__menu.el-menu {
  width: 230px;
  border-right: 0;
}
.site-content__wrapper {
  /* position: relative; */

}
</style>
